Name 3 semantic tags introduced in HTML5?

Semantic Tags Introduced in HTML5

HTML5 introduced several new semantic elements to give more meaning to web page structure. These elements help developers write cleaner, more accessible, and SEO-friendly code.

Examples of Semantic Tags from HTML5

1<article> – Represents self-contained, independent content such as a blog post or news article.
2<section> – Defines a thematic grouping of content, usually with a heading.
3<nav> – Represents a block of navigation links.

Example Usage

In short: Three common semantic elements introduced in HTML5 are <article>, <section>, and <nav>. They make web pages more meaningful and easier for both users and machines to understand.

Difficulty: 2/10

Topics: semantic HTML, accessibility, SEO

Scenario Questions

0-2 years experience

1
How would you markup a simple blog post page using three HTML5 semantic tags?
2
If you replace a <div> that wraps your site header with a <header> element, what effect does that have for screen readers and SEO?

2-5 years experience

1
During a sprint you need to add a navigation component that must be accessible; which semantic tag would you choose and why?
2
Your team swapped a <section> for a <div> and noticed a drop in SEO rankings. Explain why that might happen and how you would fix it.

5-8 years experience

1
Design a component library for a large e‑commerce site that enforces semantic HTML. What trade‑offs do you consider for backward compatibility and performance?
2
How would you audit a legacy codebase of 200k pages to incrementally introduce semantic tags without breaking existing CSS or JavaScript?

8+ years experience

1
Your organization plans a multi‑year migration from a monolithic template system to a component‑driven architecture emphasizing semantic HTML. How would you structure the rollout across teams while preserving SEO continuity?
2
What governance model would you establish to standardize semantic tag usage across dozens of product squads and ensure long‑term maintainability?

Follow-up Questions

❓Why would you prefer <nav> over a generic <div> for a navigation block?
❓What are common accessibility pitfalls when semantic tags are misused?
❓How do semantic tags influence search‑engine indexing?